<template>
    <div>
        <table class="tb">
            <tr>
                <th>
                    <input type="checkbox" v-model="checkAll" />
                </th>
                <th>产品图片</th>
                <th>编号</th>
                <th>品牌名称</th>
                <th>价格</th>
                <th>数量</th>
                <th>操作</th>
            </tr>
            <!-- 动态生成内容tr -->
            <tr v-for="(item, index) in searchArr" :key="item.id">
                <td>
                    <input type="checkbox" v-model="checkArr" :value="item" />
                </td>
                <td>
                    <img :src="item.imgUrl" height="50" width="50" />
                </td>
                <td>{{ item.code }}</td>
                <td>{{ item.productName }}</td>
                <td>{{ item.price }}</td>
                <td>
                    <button :disabled="item.count == 1" @click="decrement(item)">-</button>
                    <b>{{ item.count }}</b>
                    <button @click="increment(item)">+</button>
                </td>
                <td>
                    <button @click="del(index)">删除</button>
                </td>
            </tr>
        </table>
        <div class="add" v-show="!goods.length" style="text-align: center;">没有更多数据了</div>
        <h1 class="add" style="text-align:right">
            总价:¥
            <b style="color:red">{{ total | fix2 }}</b>
        </h1>
        <!-- {{ searchArr }} -->
    </div>
</template>
<script>
export default {
    data() {
        return {
            //input批量绑定v-model的要点
            //1.需要把v-model的值定义为一个数组
            //2.需要给每个input加上一个value属性
            //3.value属性就会被添加到v-model的这个数组中
            checkArr: [],
            goods: [
                {
                    id: 1,
                    imgUrl: 'https://img.zcool.cn/community/0112305cc00f40a801208f8b95ee56.jpg@1280w_1l_2o_100sh.jpg',
                    code: 1,
                    productName: '劳力士绿水鬼',
                    price: 15,
                    count: 1,
                },
                {
                    id: 2,
                    imgUrl: 'https://n.sinaimg.cn/sinacn20191114ac/533/w800h533/20191114/0243-iikmuth5562980.png',
                    productName: '2022款玛莎拉蒂',
                    code: 2,
                    price: 10,
                    count: 15
                },
                {
                    id: 3,
                    imgUrl: 'https://tse1-mm.cn.bing.net/th/id/R-C.9f247a5472024bf13eaed7931407a5c0?rik=N9OjnOMml2thSg&riu=http%3a%2f%2fn.sinaimg.cn%2fsinacn%2f20171031%2fcf56-fynhhay9827967.jpg&ehk=1hcK%2fXviGUM9jZbIhdjLSnxgOFH%2brZmlG2BjRYZ%2f3NE%3d&risl=&pid=ImgRaw&r=0',
                    productName: '吕布的赤兔马',
                    code: 3,
                    price: 5,
                    count: 3
                }
            ],
            checkAll: false,
            searchVal: ""
        }
    },

    //全选:全选被选中的时候,那么让checkArr直接等于goods就行了

    watch: {
        checkAll(checked) {
            // console.log(newVal)
            if (checked) {
                this.checkArr = [...this.goods]
            }
        },
        checkArr(newVal) {
            //当被选中的数据的数量和商品goods数量不同的时候,表示没有全部选中,所以要把checkAll变成false
            if (newVal.length !== this.goods.length) {
                this.checkAll = false;
            } else {
                this.checkAll = true
            }
        }
    },

    //计算总价
    //声明一个computed
    computed: {
        total() {
            return this.checkArr.length && this.checkArr.reduce((total, item) => {
                return total += item.price * item.count
            }, 0)
        },
        searchArr() {
            // console.log(this.searchVal)

            //使用indexOf来进行搜索

            return this.goods.filter(item => item.productName.indexOf(this.searchVal) !== -1)
        }
    },
    //定义过滤器,处理总价保留两位小数点
    filters: {
        fix2(input) {
            return input.toFixed(2)
        }
    },
    mounted() {
        //eventBus注册事件
        this.$bus.$on('add', input => {
            this.goods.push(input)
        })
        //注册搜索事件
        this.$bus.$on('search', searchVal => {
            //
            console.log(searchVal)
            this.searchVal = searchVal
        })
    },
    methods: {
        //删除功能
        del(index) {
            let rt = this.goods.splice(index, 1)
            //splice的返回值是删除的那个选项,返回的而是一个数组
            //处理删除选中商品的时候 总价没有变化的问题
            //思路:删除掉这条数据的时候,我们要找到checkArr这个数组中id和当前被删除的数据对应的那条数据,过滤掉就行了
            let target = rt[0];
            //返回checkArr中数据的id和删除的目标数据id不相同的选项,说明,被删除的数据的id和checkArr中id相同的这条数据不被返回,那不就是被删除掉了嘛
            this.checkArr = this.checkArr.filter(item => item.id !== target.id)
            console.log(this.checkArr)

        },
        //数量减少
        decrement(item) {
            item.count--
            console.log(item)
        },
        //数量增加
        increment(item) {
            item.count++
            console.log(item)
        }
    }
}
</script>